<template>
	<view :style="'height:' +windowHeight+'px'">
		<view class="head" >
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__on" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="isBack" class="head__on__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">上报</view>
			</view>
		</view>
		<view  :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>

		<scroll-view scroll-y="true" style="width: 99.3% !important;" :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight))+'px'">
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报单位：
				</view>
				<input class="text-oneline scroll_view_item__content" :value="depart_param.departName?depart_param.departName:''" disabled="true"
				 type="text" @click="showDepName()" />
			</view>
			<view class="scroll_view_item">

				<view class="scroll_view_item__title">
					上报时间：
				</view>
				<input class="text-oneline scroll_view_item__content" disabled="disabled" type="text" :value="reportParam.time" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报人：<text style="opacity: 0;">站</text>
				</view>
				<input class="text-oneline scroll_view_item__content" type="text" disabled="true" value="" v-model="reportParam.dep_user_name" />
			</view>
			<view class="scroll_view_item">
				<view class="scroll_view_item__title">
					上报标题：
				</view>

				<input class="text-oneline scroll_view_item__content" v-model="reportParam.title" type="text" value="" />
			</view>
			<view class="scroll_view_item" style="align-items: flex-start;flex-direction: column;">
				<view class="scroll_view_item__title">
					上报内容：
				</view>
				<view class="" style="position: relative;width: 100%;">
					<textarea style="width: 100%;background: #f8f8f8;margin-top: 24rpx;font-size: 28rpx;padding: 20rpx;" maxlength="180"
					 @input="lineChange" v-model="reportParam.context" />

					<view class="" style="position: absolute;bottom: 20rpx;right: 13rpx;font-size: 28rpx;">
						({{cursor_num}}/180)
					</view>
				</view>
				
			</view>
			<view class="scroll_view_item" style="align-items:flex-start;flex-wrap: wrap;">
				<view class="scroll_view_item__title">
					拍照上传：
				</view>
				<view class="" style="flex: 1;flex-wrap: wrap;display: flex;justify-content:  flex-start;">
					<image v-if="img_list.length < 6" src="/static/icon/shangbao_icon_camera.png" @click="openSelectBox" style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;" mode=""></image>
					<view class="" v-for="(item,index) in img_list"  :key="index"  style="width: 134rpx;height: 134rpx;margin-bottom: 20rpx;margin-right: 6rpx;position: relative;">
						<image  style="width: 100%;height: 100%;" :src="item"   mode="aspectFill"></image>
						<image @tap.top="removeImg(index)" src="../../static/icon/remove.png" style="position: absolute;right: -5rpx;top: -5rpx;width: 40rpx;height: 40rpx;" mode=""></image>
					</view>
					

				</view>

				
			</view>


			<view class="save" style="">
				<view class="save__yes" @click="save()" style="">
					保存
				</view>
		
	
				<view class="save__bao" @click="report()" style="">
					上报
				</view>
			</view>
			
		</scroll-view>

		
			



	</view>
</template>

<script>
	import moment from '@/utils/moment.min.js'
	export default {
		data() {
			return {
				reportParam:{
					dep_id:'', // 部门id
					dep_name:'',//部门名称
					dep_user_name:'',//上报人
					time:'',//上报时间
					title:'', //标题
					context:'',//上报内容
					pic:'',//上报图片
				},
				depart_param: this.departParam,
				img_list: this.imgList,
				cursor_num:0,
			};
		},
		props: {
			windowWidth: { //系统界面宽度
				type: Number,
				default () {
					return 0;
				}
			},
			windowHeight: { //系统界面高度
				type: Number,
				default () {
					return 0;
				}
			},
			statusBarHeight: { //状态栏高度
				type: Number,
				default () {
					return 0;
				}
			},
			naviBarHeight: { //导航栏高度
				type: Number,
				default () {
					return 0;
				}
			},
			imgList: { //图片
				type: Array,
				default () {
					return [];
				}
			},
			departParam:{
				type:Object,
				default(){
					return {
						id:'',
						departName:'',
						orgCode:''
					}
				}
			}
		},
		watch: {
			departParam(){
				this.depart_param = this.departParam
			},
			imgList() {
				this.img_list = this.imgList
			}
		},
		mounted(){
			this.init()

			
		},
		methods: {
			init(){
				this.reportParam = {
					dep_id:'', // 部门id
					dep_name:'',//部门名称
					dep_user_name:'',//上报人
					time:'',//上报时间
					title:'', //标题
					context:'',//上报内容
					pic:'',//上报图片
				}

				switch(moment().format('E')) {
					case '1' :
						this.reportParam.time = moment().format('YYYY-MM-DD')
						break;
					case '2' :
						this.reportParam.time = moment().format('YYYY-MM-DD')
						break;
					case '3' :
						this.reportParam.time = moment().format('YYYY-MM-DD')
						break;
					case '4' :
						this.reportParam.time = moment().format('YYYY-MM-DD')	
						break;
					case '5' :
						this.reportParam.time = moment().format('YYYY-MM-DD')	
						break;
					case '5' :
						this.reportParam.time = moment().format('YYYY-MM-DD')		
						break;
					case '7' :
						this.reportParam.time = moment().format('YYYY-MM-DD')		
						break;	
					}
					
				var userInfo = uni.getStorageSync('userInfo')
				
				this.reportParam.dep_user_name = userInfo.realname
			},
			isBack(){
		
				this.$emit('isBack');
			},
			lineChange(e){
				this.cursor_num = e.target.cursor
			},
			//上报
			report(){
				if(this.depart_param.departName == '' || JSON.stringify(this.depart_param) == "{}"){
					uni.showToast({
					    title: '请选择上报单位',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.dep_user_name == ''){
					uni.showToast({
					    title: '请填写上报人',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.title == ''){
					uni.showToast({
					    title: '请填写上报标题',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.context == ''){
					uni.showToast({
					    title: '请填写上报内容',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				uni.showToast({
				    title: '上报中...',
				    duration: 400
				});
				this.reportParam.dep_id = this.depart_param.id
				this.reportParam.dep_name = this.depart_param.departName
				this.reportParam.pic = this.img_list.join(',')
				this.$appReport.fAppReportReport(this.reportParam).then((res) =>{
					plus.nativeUI.toast("上报成功");
					
					setTimeout(() => {
						this.$emit('report') //初始化主页面的图片列表和上报单位
						this.init()
					},400)
					uni.$emit('updateMyReport_event',{msg:'页面更新'})
					uni.hideToast();
				})
				
			},
			openSelectBox() {
				this.$emit('openSelectBox')
			},
			save(){
				if(this.depart_param.departName == '' || JSON.stringify(this.depart_param) == "{}"){
					uni.showToast({
					    title: '请选择上报单位',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.dep_user_name == ''){
					uni.showToast({
					    title: '请填写上报人',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.title == ''){
					uni.showToast({
					    title: '请填写上报标题',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.reportParam.context == ''){
					uni.showToast({
					    title: '请填写上报内容',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				this.reportParam.dep_id = this.depart_param.id
				this.reportParam.dep_name = this.depart_param.departName
				this.reportParam.pic = this.img_list.join(',')
				this.$appReport.fAppReportSave(this.reportParam).then((res) =>{
					plus.nativeUI.toast("保存成功");
					setTimeout(() => {
						this.$emit('report') // //初始化主页面的图片列表和上报单位
						this.init()
					},400)
					uni.$emit('updateMyReport_event',{msg:'页面更新'})
				}).catch(err => {
					console.log(err)
      			})
			},
			//展开上报单位
			showDepName(){
				this.$emit('showDepName');
			
			},
			//移除图片
			removeImg(index){
				this.img_list.splice(index, 1)
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					duration: 2000
				})
				this.$forceUpdate()
			}

		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;
		&__on {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.scroll_view_item{
		border-bottom: 1px solid #f8f8f8;padding:30rpx;display: flex;align-items: center;
		
		&__title{
			display: inline-block;white-space: nowrap;font-size: 28rpx;
		}
		&__content{
			margin-left: 10rpx;text-align: left;font-size: 28rpx;
		}
	
	}
	.save {
		font-size: 28rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 50rpx;margin-bottom: 50rpx;padding: 0rpx 77rpx;
		&__yes {
			padding: 20rpx 72rpx;display: flex;align-items: center;justify-content: center;border-radius: 50rpx;background-color: #28b67c;color: #FFFFFF;
		}
		&__bao {
			padding: 20rpx 72rpx;display: flex;align-items: center;justify-content: center;border-radius: 50rpx;background-color: #28A9E3;color: #FFFFFF;
		}
	}

</style>
